<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRouter, RouterLink } from 'vue-router';
import { useMeunItemStore } from '@/stores/meunList'
import { sseService } from "@/assets/utils/sse";
import type { SSEChatParams } from "@/assets/utils/sse";


import svgIcon from '@/components/base-svgIcon/index.vue';
import{sseUrl} from "@/service/sseUrl";
import Papa from "papaparse";
const router = useRouter()

const menuItem = useMeunItemStore()

const op = router.options.routes
const ops = JSON.parse(JSON.stringify(op));;


const searchValue = ref<string>() 
const statcMeunList = ref<any>([])//固定菜单
const listData = ref<any>([])//后台推送菜单

//固定菜单加载
for (let i = 0; i < op.length; i++) {
  if (op[i].children) {
    let arr: any = op[i].children
    // console.log('kdkdkdkdkd',arr);
    
    for (let m = 0; m < arr.length; m++) {
      // console.log(arr[m]);
      let item = arr[m]
      if (item.meta.isMeun == "0" || item.meta.isMeun == "2"  ) {
        statcMeunList.value.push(item)
      }
     
    }
  }
}



onMounted(() => {
  let lg: any = null
  // console.log('localStorage.getItem',localStorage.getItem('menuItem'));
  
  if (localStorage.getItem('menuItem')) {
    lg = localStorage.getItem('menuItem')
    let lg1 = JSON.parse(lg)
    listData.value = lg1.menuItem
    // console.log('菜单-----',listData.value);
  }

  // 添加 storage 事件监听器
  sseServiceOpen()
})
onUnmounted(() => {
  sseService.disconnect()
})

// // 处理 storage 改变事件
// const handleStorageEvent = (event:any) => {
//   if (event.key === 'menuItem') {	//这里是你存入LocalStorage的键名
//     console.log('json变了', event.newValue) 	//获取到改变后的值
//   }
// };


//see 链接
function sseServiceOpen() {
  console.log(sseService);

  const onopen = () => {
    console.log("消息菜单建立无敌 sse 连接成功")
  }
  // 建立连接
  let sseChatParams: SSEChatParams = {
    onopen,
    url: sseUrl.meun,
    onmessage: (event: MessageEvent) => {
      // 收到消息
      console.log('收到消息菜单：', event.data);
      let fst = event.data.replace(/\\n/g, "\n")
      const meun = Papa.parse(fst, { header: true, delimiter: ";", newline: "\n" })
      console.log(meun);
      listData.value = meun.data
      menuItem.setMeunlist(meun.data)
    },
    finallyHandler: () => {
      console.log("finallyHandler操作")
    }
  };
  sseService.connect(sseChatParams)


}



function liClick(val: any, num: number) {
  console.log(val,num);
  
  if (num) {
    let value = JSON.stringify(val)
    let str = encodeURIComponent(value)
    router.replace({ path: '/showFile',query: { data: str }});
  } else {
   
    router.replace({ path: val.path});

  }

}



function close(e: any) {
  closeMeunDrawer()
}


function closeMeunDrawer() {
  router.replace({ path: '/' });
}
// function setmeuns() {
//   // localStorage.setItem('meunItem','kkkkkkk')

//   let a=[
//   {
//     0: Math.random().toString(36),
//     1:'rrrrrrrr',
//     2:'rrrrrrrr'
//   }]


//   menuItem.setMeunlist(a[0])
// }
// function getmeuns() {
//   // localStorage.setItem('meunItem','kkkkkkk')
//   menuItem.getMeunlist()
//   // console.log(localStorage.getItem('menuItem'));
//   // console.log();
// }
</script>
<template>
  <!-- 菜单打开抽屉 -->
  <div class="sidenav" @dblclick.stop="close">
    <div class="sidenav_content">
      <!-- <div class="search" @click.stop>
                <n-input v-model:value="searchValue" type="text" placeholder="搜索" style="width: 300px;"></n-input>
            </div> -->
      <div class="search_list" @dblclick.stop="close">
        <div class="search_list_ul">
          <!-- 固定菜单 -->
          <div class="search_list_li" v-for="(m, k) in statcMeunList " :key="k" >
            <div style="height:80px;width: 100%;line-height: 60px;" @dblclick.stop="liClick(m, 0)">
              <svgIcon :icon-name="m.meta.icon"></svgIcon>
            </div>
            <div class="search_list_li_name" @dblclick.stop="liClick(m, 0)">{{ m.meta.name }}</div>
          </div>


          <!-- 推送菜单 -->
          <div class="search_list_li" v-for="(i, l) in listData " :key="l" >
            <div style="height:80px;width: 100%;line-height: 60px;" @dblclick.stop="liClick(i, 1)">
              <svgIcon :icon-name="listData[l].图标名"></svgIcon>
            </div>
            <div class="search_list_li_name" @dblclick.stop="liClick(i, 1)">{{ listData[l].应用名称 }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="sidenav" @click.stop="close">
    <button @click.stop="setmeuns">setmeun</button>


    <button @click.stop="getmeuns">getmeun</button>
    {{ menuItem.doubleCount }}
  </div> -->
</template>
<style src="./index.scss" scoped></style>
<style lang="scss" scoped></style>
